<template>
  <main-card-admin
    :title="`审核详情（${appInfo.name || ''})`"
    :crumbs="crumbs"
    :loading="loading"
    :screen-style-obj="computedScreenStyleObj"
  >
    <div class="details-content">
      <audit-result :app-info="appInfo" />
      <information-form
        background-color="#fafafa"
        :audit-app-api="appInfo.auditAppApiVOList"
        :audit-app-sdk="appInfo.auditAppSdkVOList"
        @getClientInfo="getClientInfo()"
      />
    </div>
  </main-card-admin>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import { applicationAuditApi } from '@/services/api'

  import AuditResult from '../../components/AuditResult.vue'
  import InformationForm from '../../components/InformationForm.vue'
  import { AuditDetails } from '../../types'

  const route = useRoute()

  const { id } = route.params as { id: string }

  const crumbs = computed(() => {
    return [{ path: '/admin/app-check/check-log/list', name: `审核记录` }, { name: `审核详情（${appInfo.value.name || ''})` }]
  })
  const computedScreenStyleObj = computed(() => {
    return {
      padding: '0 32px 0 32px'
    }
  })
  const appInfo = ref<AuditDetails>({})

  const { loading, runAsync: getClientInfo } = useRequest<any>(applicationAuditApi.recordDetails(id), {
    onSuccess: res => {
      const { data } = res
      Object.assign(appInfo.value, data)
    },
    onError: () => {}
  })
</script>
<style lang="less" scoped>
  :deep(.ant-collapse > .ant-collapse-item-active:last-child > .ant-collapse-header) {
    border-radius: 0;
  }

  .ant-form-item:last-child {
    margin-bottom: 12px !important;
  }

  :deep(.ant-collapse) {
    overflow: hidden;
    // margin-top: 24px;
    width: 100%;
    border-radius: 6px;

    :deep(.ant-collapse-header) {
      background-color: #fff;
    }

    :deep(.ant-collapse-content-box) {
      padding: 0;
    }
  }

  :deep(.error-input) {
    border: 1px solid #f00;
  }

  :deep(.ant-collapse > .ant-collapse-item:last-child) {
    border-radius: 6px;
  }

  :deep(.ant-tabs) {
    .ant-tabs-tab {
      padding: 0;
      padding-bottom: 6px;
    }

    .ant-tabs-tab.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: @text01;
        font-weight: 700;
      }
    }

    .ant-tabs-ink-bar {
      height: 3px;
    }
  }

  :deep(.ant-tabs-top > .ant-tabs-nav) {
    &::before {
      border-bottom: none;
    }
  }
  // .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn
  :deep(.ant-table-wrapper .ant-table:not(.ant-table-bordered) .ant-table-tbody > tr:last-child > td) {
    border-bottom: none;
  }

  :deep(.ant-table-thead > tr > th) {
    padding: 0 16px;
    height: 32px;
    font-size: 12px;
    background-color: @background2;
    border: none;
    font-weight: 400;
  }

  :deep(.ant-table-tbody > tr > td) {
    height: 38px;
  }

  :deep(.ant-table-wrapper .ant-table.ant-table-small .ant-table-thead > tr > th) {
    padding: 0 16px;
    height: 32px;
    font-size: 12px;
    border: none;
    font-weight: 400;
  }

  :deep(.ant-table-wrapper) {
    .ant-table {
      border: none;
    }
  }

  :deep(.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody > tr > td) {
    padding: 0 16px;
  }

  .details-content {
    position: relative;
    display: flex;
    margin: 0 auto;
    width: 864px;
    background: #fff;
    border-radius: 6px;
    flex-direction: column;
    gap: 24px;
  }
</style>
